<template>
  <div class="orderDetail">
    <el-container>
      <el-header height="50px"><h3>订单详情</h3></el-header>
      <el-main>
        <el-form :model="order" label-width="160px">
          <el-row>订单基本信息：</el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="7">
              <el-form-item label="订单号：">
                <el-input v-model="order.orderNo" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="订单状态：">
                <el-input v-model="order.orderStatus" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="支付金额(元)：">
                <el-input v-model="order.totalAmt" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="创建时间：">
                <el-date-picker
                  type="datetime"
                  v-model="order.createTime"
                  style="width: 100%;"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="支付时间：">
                <el-date-picker
                  type="datetime"
                  v-model="order.orderPayTime"
                  style="width: 100%;"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="margin-top: 10px;">会员基本信息：</el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="7">
              <el-form-item label="手机号：">
                <el-input v-model="order.mobile" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="会员id：">
                <el-input v-model="order.userId" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">特惠券包基本信息：</el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="7">
              <el-form-item label="特惠券包ID：">
                <el-input v-model="order.orderSubList[0].cbId" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="特惠券包名称：">
                <el-input v-model="order.orderSubList[0].cbName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="特惠券包展示有效期：">
                <el-date-picker
                  type="datetime"
                  v-model="order.orderSubList[0].couponBundle.showTime"
                  style="width: 100%;"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label>
                <el-date-picker
                  type="datetime"
                  v-model="order.orderSubList[0].couponBundle.finishTime"
                  style="width: 100%;"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="特惠券包支付有效期：">
                <el-date-picker
                  type="datetime"
                  v-model="order.orderSubList[0].couponBundle.orderTime"
                  style="width: 100%;"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label>
                <el-date-picker
                  type="datetime"
                  v-model="order.orderSubList[0].couponBundle.finishTime"
                  style="width: 100%;"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="特惠券包规则说明：">
                <el-input
                  type="textarea"
                  :rows="10"
                  placeholder="请输入内容"
                  v-model="order.orderSubList[0].couponBundle.description"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="margin: 10px 0;">绑定券明细：</el-row>
          <el-table :data="couponTableData">
            <el-table-column prop="couponId" label="券编号" width="100"></el-table-column>
            <el-table-column prop="couponName" label="券名称" width="200"></el-table-column>
            <el-table-column prop="type" label="券类型" :formatter="typeFormat" width="120"></el-table-column>
            <el-table-column
              prop="originalPrice"
              :formatter="amtFormat"
              label="券/张卖价(元)"
              width="120"
            ></el-table-column>
            <el-table-column prop="bindNum" label="绑定券数量" width="100"></el-table-column>
            <el-table-column prop="usedNum" label="使用券数量" width="100"></el-table-column>
          </el-table>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import api from "@/api";
import format from "@/utils/format";

export default {
  data() {
    return {
      order: {},
      id: null,
      couponTableData: []
    };
  },

  created() {
    this.id = this.$route.query.id;
    this.getDetail(this.id);
  },

  methods: {
    getDetail(val) {
      api.bundle
        .getOrderDetail(val)
        .then(res => {
          this.order = res.data.data;
          this.order.orderStatus = this.statusFormat(this.order.orderStatus);
          this.order.totalAmt = format.toRMB(this.order.totalAmt);
          this.couponTableData =
            res.data.data.orderSubList[0].orderSubCouponList;
        })
        .catch(err => {});
    },

    typeFormat(row, column, cellValue) {
      switch (cellValue) {
        case 0:
          return "会员优惠券";
        case 1:
          return "免费券";
        case 2:
          return "满减优惠券";
        case 3:
          return "商品立减券";
        default:
          break;
      }
    },

    statusFormat(val) {
      switch (val) {
        case 1:
          return "待支付";
        case 2:
          return "已支付";
        case 3:
          return "已取消";
        case 4:
          return "已退款";
        case 5:
          return "已结算";
        case 10:
          return "支付中";
        case 11:
          return "退款中";
        default:
          break;
      }
    },

    amtFormat(row, column, cellValue) {
      return format.toRMB(cellValue);
    }
  }
};
</script>

<style lang="scss" scoped></style>